<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="1200px"
    :before-close="handleClose"
  >
    <div class="workTitle work">
      <div class="col col1">购买上传作品数量</div>
    </div>
    <div class="workWrap">
      <div class="tips">支付前请确认金额</div>
      <div class="contact">
        <div class="left">
          <div class="title">CONTACT US</div>
          <div class="text">*有任何支付问题请联系在线客服：400-4000-400</div>
          <ul>
            <li>
              <p class="pay1"><img src="@/assets/alipay.png" alt="" />支付宝</p>
            </li>
            <li>
              <p class="pay1"><img src="@/assets/wxpay.png" alt="" />微 信</p>
            </li>
            <li>
              <p class="pay2">
                <img src="@/assets/payicon3.png" alt="" />Paypal
              </p>
            </li>
            <li>
              <p class="pay2">
                <img src="@/assets/payicon4.png" alt="" />银行卡支付
              </p>
            </li>
          </ul>
        </div>
        <div class="right">
          <div class="aliPay payCode">
            <img :src="qrcode_alipay" alt="" />
            <p><img src="@/assets/alipay.png" alt="" />请用支付宝扫码支付</p>
          </div>
          <div class="wxPay payCode">
            <img :src="qrcode_wxpay" alt="" />
            <p>
              <img src="@/assets/wxpay.png" alt="" />
              请用微信扫码支付
            </p>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "recharge",
  data() {
    return {
      dialogVisible: false,
      info: {},
      order_no: "",
      qrcode_wxpay: "",
      qrcode_alipay: "",
      timer: null,
    };
  },
  methods: {
    open(money) {
      this.dialogVisible = true;
      this.generateOrder(money);
    },
    generateOrder(money) {
      this.$post("/recharge/submit", { money: money }).then((res) => {
        if (res.code == 1) {
          this.order_no = res.data.order_no;
          // this.qrcode_url = res.data.qrcode_url;
          this.qrcode_wxpay = res.data.qrcode.wxpay;
          this.qrcode_alipay = res.data.qrcode.alipay;
          this.timer = setInterval(() => {
            this.queryOrder();
          }, 3000);
        }
      });
    },
    queryOrder() {
      let that = this;
      this.$post("/recharge/query_order", {
        order_no: this.order_no,
      }).then((res) => {
        if (res.data.status == "success") {
          that.handleClose();
          that.$message.success("支付成功");
          // window.open(this.info.image_url, "_blank");
          setTimeout(function () {
            location.href = "/user/recharge";
          }, 2000);
        }
      });
    },
    handleClose() {
      clearInterval(this.timer);
      this.dialogVisible = false;
    },
  },
};
</script>

<style scoped lang="scss">
:deep .el-dialog__header {
  padding: 0;
}
:deep .el-dialog__body {
  color: #333;
  font-size: 16px;
  padding: 0;
}
.workTitle {
  background: #f6f6f6;
  padding: 20px 50px;
  .col {
    font-weight: bold;
    font-size: 24px;
    text-align: center;
  }
  .col1,
  .col2 {
    text-align: left;
  }
}
.workWrap {
  padding: 30px 50px;
}
.work {
  display: flex;
  align-items: center;
  .col1 {
    width: 25%;
  }
  .col2 {
    width: 35%;
    padding: 0 30px;
  }
  .col3 {
    width: 20%;
    text-align: center;
  }
  .col4 {
    width: 20%;
    text-align: center;
  }
  .title {
    font-weight: bold;
    font-size: 22px;
    margin-bottom: 20px;
  }
}
.tips {
  margin: 30px 0;
  padding: 20px;
  text-align: center;
  background: #ece7ee;
  span {
    font-weight: bold;
    color: #441054;
  }
}
.contact {
  padding: 30px;
  background: #f6f7f9;
  display: flex;
  .left,
  .right {
    width: 50%;
  }
  .left {
    .title {
      font-size: 30px;
      font-weight: bold;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        width: 50%;
        padding: 10px;
        p {
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 6px;
          padding: 8px;
        }
        .pay1 {
          border: 1px solid #333;
        }
        .pay2 {
          background: #917bbd;
          color: #fff;
        }
        img {
          display: block;
          width: 38px;
          height: 38px;
          margin-right: 10px;
        }
      }
    }
  }
  .right {
    display: flex;
    .payCode {
      padding: 0 15px;
      width: 50%;
      text-align: center;
      p {
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 38px;
          height: 38px;
        }
      }
    }
  }
}
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 768px) {
}
</style>
